<template>
	<div>
		<CustomDialog
			:title="state.dialog.title"
			v-model:visible="state.dialog.isShowDialog"
			dialogWidth="900px"
			@close="closeDialog"
			:dialogFooterBtn="true"
		>
			<el-form :model="state.ruleForm" ref="commentRef" label-width="100px">
				<el-row :gutter="35">

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="客户ip">
              <el-input v-model="state.ruleForm.ip" disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="用户名">
              <el-input v-model="state.ruleForm.username" disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="用户昵称">
              <el-input v-model="state.ruleForm.nickname" disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="平台">
              <el-input v-model="state.ruleForm.platform" disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="来源">
              <el-input v-model="state.ruleForm.source" disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="登录时间">
              <el-input v-model="state.ruleForm.loginTime" disabled></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="userAgent">
              <el-input v-model="state.ruleForm.userAgent" type="textarea" disabled></el-input>
            </el-form-item>
          </el-col>
				</el-row>
			</el-form>

    </CustomDialog>
	</div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import messageUtils from '/@/utils/messageUtils';
import { LoginLogApi } from '/@/api/log/login';
const state = reactive({
	ruleForm: {
		userAgent: '',
		ip: '',
		username: '',
		nickname: '',
		source: '',
		fullname: '',
		platform: '',
		loginTime: '',
	},
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
});

const closeDialog = () => {
	state.dialog.isShowDialog = false;
};

const openDialog = async (id: string) => {
	state.dialog.isShowDialog = true;
	try {
		const { data } = await LoginLogApi().view(id);
		state.ruleForm = data;
	} catch (e) {
		messageUtils().error('操作失败');
	}
};

defineExpose({ openDialog });
</script>

<style scoped lang="scss"></style>
